<template>
  <div class="center-view">
      <div class="swapper-view">
          <div class="about-head">
              <span class="head-fir">MOST POPULAR CARS</span>
              <span class="head-sec">IT'S TIME TO DRIVE</span>
          </div>
          <div class="swapper">
              <el-carousel :interval="2500" type="card" class="swapper-item" trigger="click">
                <el-carousel-item v-for="item in swapper" :key="item.id" justify="center">
                    <img :src="item.address" alt="">
                </el-carousel-item>
                <img src="http://192.168.2.27:8888/assets/img/swapperlist/f1.jpg" style="width:100%;opacity: 0;" alt="">
            </el-carousel>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'CenterView',
    data() {
        return {
            //引用本地图片时，url地址需要require引用
            swapper: [
                { id: '1', address: require('assets/img/swapperlist/f1.jpg') },
                { id: '2', address: require('assets/img/swapperlist/f2.jpg') },
                { id: '3', address: require('assets/img/swapperlist/f3.jpg') },
            ],
            timer: false,
        }
    },

}
</script>

<style lang="scss" scoped>

@media only screen and (max-width: 620px) {
        .head-fir {
            font-size: 39px;
        }
    }
    @media only screen and (min-width: 621px){
        .head-fir {
            font-size: 50px;
        }
    }
    @media only screen and (max-width: 510px) {
        .head-fir {
            font-size: 35px;
        }

    }
img {
    
    vertical-align: top;
    width: 100%;
    height: 100%;
}
.center-view {
    width: 100%;
    overflow: hidden;
}
.swapper-view {
    max-width: 1100px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
}
.about-head {
    max-width: 700px;
    height: 150px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
}
.head-fir {
    
    font-weight: 900;
    font-style: italic;
    letter-spacing: 2px;
    color: rgba(60, 61, 53, 0.562);
}
.head-sec {
    margin-top: 14px;
    letter-spacing: 10px;
    color: #0064d2;
}
.el-carousel{
    // max-width: 550px;
    // width: 100%;
    max-height: 450px;
    border-radius: 8px;
}
.el-carousel {
    // max-height: 450px;
    width: 100%;
}
.el-carousel__item {
    max-width: 550px;
    border-radius: 8px;

}
</style>